import ReactMarkdown from "react-markdown";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
import "./index.less";

interface IMdViewer {
  content: string;
}

const MdViewer = ({ content }: IMdViewer) => {
  const inlineCodeStyle = {
    // background: "rgba(243, 244, 244)",
    // padding: "2px 5px",
    // fontSize: "15px",
    // color: "rgba(51, 51, 51)",
  };

  return (
    <div className="md-viwer">
      <ReactMarkdown
        components={{
          code({ children, className, inline }) {
            // 匹配否指定语言
            const match: any = /language-(\w+)/.exec(className || "");
            return (
              <>
                {!inline ? (
                  // @ts-ignore
                  <SyntaxHighlighter showLineNumbers={true} language={match && match[1]} style={oneDark}>
                    {String(children).replace(/\n$/, "")}
                  </SyntaxHighlighter>
                ) : (
                  <code className={className} style={inlineCodeStyle}>
                    {children}
                  </code>
                )}
              </>
            );
          },
        }}
      >
        {content || ""}
      </ReactMarkdown>
    </div>
  );
};

export default MdViewer;
